
<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 搜索 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">
          <el-form-item prop="项目编号">
            <el-input v-model="searchConfig.bill_num" placeholder="请输入项目编号" type="text" size="small"/>
          </el-form-item>

            <el-form-item label="报单状态">
            <el-select v-model="searchConfig.audit_state" placeholder="请选择报单状态" size="small">
              <el-option
                v-for="(item, index) in states"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <YlButton uiType="default" icon="el-icon-search" @click="handleSearch">搜 索</YlButton>
            <YlButton uiType="default" btnType="success" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="resetSearch">重 置</YlButton>
          </el-form-item>
        </el-form>
      </div>

      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          style="width: 100%"
          :data="tableData"
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="系别" prop="nns_department" show-overflow-tooltip />
          <el-table-column align="center"  label="报单类型" >
            <template slot-scope="{row}">
              {{ row.nns_is_special | formatBillKind}}
            </template>
          </el-table-column>

          <el-table-column align="center"  label="单类名称" prop="nns_category_name" show-overflow-tooltip />

          <el-table-column align="center"  label="报单编号" show-overflow-tooltip  >
            <template slot-scope="{row}">
              {{ row.nns_category_symbol + '-' + row.nns_category_num }}
            </template>
          </el-table-column>

          <el-table-column align="center"  label="摘要" prop="nns_summary" show-overflow-tooltip />

          <el-table-column align="center"  label="发生金额(元)"  >
            <template slot-scope="{row}">
              {{ row.nns_amount_money | formatMoney('yuan')}}
            </template>
          </el-table-column>

          <el-table-column align="center"  label="实际发生金额(元)" prop="nns_create_time" width="150" >
            <template slot-scope="{row}">
               {{ row.nns_actual_amount_money | formatMoney('yuan')}}
            </template>
          </el-table-column>

          <el-table-column align="center"  label="审核状态" prop="nns_create_time">
            <template slot-scope="{row}">
              <span :style="formatAuditState(row.nns_state, 'style')">{{formatAuditState(row.nns_state, 'field')}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="{row}">
              <YlButton
                uiType="main"
                v-if="row.nns_state === 1"
                @click="handleMethod(row.nns_id, 1)"
              >
                <span>提交</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="warning"
                v-if="row.nns_state === 2"
                @click="handleMethod(row.nns_id, 0)"
              >
                <span>撤回</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="success"
                v-if="canWrite === 'true' && (row.nns_state === 1  || row.nns_state === 4)"
                @click="handleShowAndFix(row.nns_id, row.nns_state, false)"
              >
                <span>编辑</span>
              </YlButton>

              <YlButton
                v-if="canWrite === 'false' || row.nns_state === 2 || row.nns_state === 3 "
                uiType="main"
                @click="handleShowAndFix(row.nns_id, row.nns_state, true)"
              >
                <span>查看</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="danger"
                v-if="row.nns_state === 1 || row.nns_state === 4"
                @click="handleDelete(row.nns_id)"
              >
                <span>删除</span>
              </YlButton>
            </template>
          </el-table-column>
          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
        <!-- 分页模块 -->
        <YlPage
          :size="size"
          :page="page"
          :total="total"
          @page-size="handlePageSize"
          @current-page="handleCurrentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      canWrite: this.$route.query.canWrite,
      // 轮播框
      loading: false,
      // 列表数据
      tableData: [],
      // 搜索框
      searchConfig: {
        stage_id: '',
        mx_id: '',
        bill_num: '',
        audit_state: ''
      },
      // 状态
      states: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '待提交',
          value: '1'
        },
        {
          label: '待审核',
          value: '2'
        },
        {
          label: '通过',
          value: '3'
        },
        {
          label: '驳回',
          value: '4'
        }
      ],
      // 审核状态配置
      stateConfig: {
        not_submit: {
          style: {
            color: '#909399' // info
          },
          field: '待提交'
        },
        wait_audit: {
          style: {
            color: '#E6A23C' // info
          },
          field: '待审核'
        },
        passed: {
          style: {
            color: '#67C23A' // info
          },
          field: '通过'
        },
        rejected: {
          style: {
            color: '#F56C6C' // info
          },
          field: '驳回'
        }
      },
      // 分页
      page: 1,
      size: 10,
      total: 0,
      dialogFormVisible: false,
      changeId: '',
      query: ''
    }
  },
  created () {
    this.loading = true
    this.query = this.$route.query
    this.canWrite = this.query.canWrite
    this.searchConfig.stage_id = this.query.stage_id
    this.searchConfig.mx_id = this.query.mx_id
    this.initTable()
  },
  methods: {
    // 初始化数据
    async initData (page_size = this.size, page = this.page) {
      let data = await this.$ylapi.getWriteLogListExecuteStageBillWrite({
        page_size,
        page,
        ...this.searchConfig
      })
      this.loading = false
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
    },
    // 初始化列表
    initTable () {
      this.searchConfig = this.initForm(this.searchConfig, ['stage_id', 'mx_id'])
      this.searchConfig.name = ''
      this.searchConfig.creator = ''
      this.loading = true
      this.initData(10, 1)
    },
    // 搜索
    handleSearch () {
      this.loading = true
      this.initData(10, 1)
    },
    // 重置搜索
    resetSearch () { this.initTable() },
    // 删除
    async handleDelete (id) {
      console.log(id)
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteBillWrite,
        obj: id
      })
        ? this.initTable()
        : ''
    },
    // 分页---页容量选择器
    handlePageSize (val) {
      this.size = val
      this.loading = true
      this.initData()
    },
    // 分页
    handleCurrentPage (val) {
      this.page = val
      this.loading = true
      this.initData()
    },
    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable()
      }
    },
    // 提交 撤回功能
    async handleMethod (id, op) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        // eslint-disable-next-line eqeqeq
        warning: `是否确定${op == 1 ? '提交' : '撤回'}当前项目?`,
        obj: { id, op },
        api: this.$ylapi.billResolveOrRject
      })
        ? this.initTable()
        : ''
    },

    // 查看报单
    handleShowAndFix (id, state, isShow) {
      this.$router.push(`/executeStage/billWrite/show/fill/${id}/${isShow}/${this.query.stage_id}`)
    },
    // 关闭弹窗
    getCloseDialog (val) { this.dialogFormVisible = val }
  },
  computed: {
    formatAuditState () {
      return function (state, type) {
        let stateField = ''
        switch (state) {
          case 1:
            stateField = 'not_submit'
            break
          case 2:
            stateField = 'wait_audit'
            break
          case 3:
            stateField = 'passed'
            break
          case 4:
            stateField = 'rejected'
            break
        }
        if (!this.stateConfig[stateField][type]) {
          return ''
        }

        return this.stateConfig[stateField][type]
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
